<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{

            background-color: #000;
        }
        a{
            width:200px;
            height:50px;
            display: inline-block;
            text-align: center;/*文字水平居中*/ 
            /* 文字垂直居中 */
            /* 行高=盒子高度 文字能够垂直居中 */
            line-height: 50px;
            color:#fff;
            font-size:22px;
            text-decoration: none;
        }
        a:hover{
            background-image: url(images/) no-repeat;
        }

        #father #son{
            color:blue
        }
        #father p.c2{
            color: black;
        }
        div.c1 p.c2{
            color:red;
        }
        #father p{
            color:green !important;
        }
        table{
            width:700px;
            height: 300px;
            /* border: 1px solid red; */

        }
        td{
            border: 1px solid red;
            color:#fff;
            text-align: center;


        }

    </style>
</head>
<body>
    <a href="#">专区说明</a> 
    <a href="#">申请资格</a>
    <a href="#">兑换奖励</a>
    <a href="#">下载游戏</a>

    <div id="father" class="c1">
        <p id="son" class="c2">
            试问这行字体是什么颜色？
        </p>
    </div>

    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>



</body>
</html>


https://www.bilibili.com/video/BV1rU4y1g7sW?p=9&vd_source=0aca8fcd0be3ec2b2b59b6de3fd052d7
https://www.bilibili.com/video/BV16K4y1Z7Gb?vd_source=0aca8fcd0be3ec2b2b59b6de3fd052d7
https://3yya.com/education/6
https://www.bilibili.com/video/BV13V41117xc?p=1&vd_source=0aca8fcd0be3ec2b2b59b6de3fd052d7

https://www.bilibili.com/video/BV14J4114768?p=273&vd_source=0aca8fcd0be3ec2b2b59b6de3fd052d7
https://gitee.com/xiaoqiang001/html_css_material 配套素材
https://www.bilibili.com/video/BV1Bx411u7cS?p=220&vd_source=0aca8fcd0be3ec2b2b59b6de3fd052d7
